<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="billiards-box" :class="{'repair-box':tableInfo.status==3}">
					<view class="table-info flexWrapNo">
						<view class="big">{{numText}}</view>
						<view class="info">
							<view class="table-name">{{characters}}
								<view class="status" :class="{busy:tableInfo.status==2||tableInfo.status==99,repair:tableInfo.status==3}">{{tableInfo.status==2||tableInfo.status==99?'使用中':tableInfo.status==3?'维护中':'空闲'}}</view>
							</view>
							<view class="store-name flexWrapNo">
								<image src="../static/home/navigation-icon.png" class="navigation-icon"></image>
								{{tableInfo.shop_name}}
							</view>
						</view>
					</view>
					<view class="time-box flexWarpCenterColumn">
						<view class="time-tips" v-if="tableInfo.status==2">剩余时间</view>
						<view class="time-tips" v-if="tableInfo.status==1">{{tableInfo.near_start_time?'离预约单开始还剩余':''}}</view>
						<view class="time" v-if="tableInfo.day_yuyue">
							<liu-countdown ref="countdown3" auto mode="1" :showHours="true" :showDays="false" :endDate="tableInfo.day_yuyue"></liu-countdown>
						</view>
						<view class="time" v-if="tableInfo.near_start_time">
							<liu-countdown ref="countdown3" auto mode="1" :showHours="true" :showDays="false" :endDate="tableInfo.near_start_time" @change="change"></liu-countdown>
						</view>
					</view>
					<view class="center-box flexWarpCenterColumn" @tap="hoursToggele()">
						<view class="appointment-tips" v-if="tableInfo.status==1">{{tableInfo.yuyue?tableInfo.yuyue+'可预约':'今日暂无预约'}}</view>
						<view class="appointment-tips" v-if="tableInfo.status==2">{{tableInfo.yuyue}}可预约</view>
						<image src="../static/home/down-icon.png" class="down-icon" :class="{up:hoursShow}"></image>
					</view>
					<view class="lattice-box flexWrapNo" v-if="hoursShow">
						<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index<=23">
							<view class="lattice" :class="{white:index>pastHour,blue:index>=currentHour&&index<=allHour,red:item.order_type!=0}">
								<text class="lattice-text">{{item.time}}</text>
							</view>
						</view>
					</view>
					<!-- <view class="lattice-box flexWrapNo" v-if="allHour>23">
						<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index>23">
							<view class="lattice white" :class="{blue:item.time<=allHour-24,red:item.order_type!=0}">
								<text class="lattice-text">{{item.time}}</text>
							</view>
						</view>
					</view> -->
				</view>
				<view class="mode-box flexWrap">
					<view class="mode-item" @tap="goOrder(0)" :class="{disabled:tableInfo.status==2,disabled:tableInfo.status==3,disabled:tableInfo.near_start_time&&minutes<15&&hours=='00'}" >
						<image src="../static/home/immediately-icon.png" class="mode-img"></image>
						<view class="mode-cont">
							<view class="mode-title">立即开台</view>
							<view>
								<block v-if="tableInfo.near_start_time&&hours=='00'">
									{{(hours=='00'&&minutes>15)?'按'+minutesPrice+'元/分钟实付开台':'不足15分钟无法开台'}}
								</block>
								<block v-else>
									默认就近一小时开台
								</block>
							</view>
						</view>
					</view>
					<view class="mode-item" @tap="goOrder(1)" :class="{disabled:tableInfo.status==3}">
						<image src="../static/home/appointment-icon.png" class="mode-img"></image>
						<view class="mode-cont">
							<view class="mode-title">预约开台</view>
							<view>默认预约5分钟后开台</view>
						</view>
					</view>
					<view class="mode-item" @tap="goVerificationCoupon()":class="{disabled:tableInfo.status==3}">
						<image src="../static/home/verificationCoupon-icon.png" class="mode-img"></image>
						<view class="mode-cont">
							<view class="mode-title">验券开台</view>
							<view>验券后立即/预约开台</view>
						</view>
					</view>
					<view class="mode-item" :class="{disabled:tableInfo.status==3}">
						<image src="../static/home/payLater-icon.png" class="mode-img"></image>
						<view class="mode-cont">
							<view class="mode-title">先打后付</view>
							<view>预付100</view>
						</view>
					</view>
				</view>
				<view class="service-box flexWrapNo">
					<image src="../static/user/service.png" class="service-icon"></image>
					{{tableInfo.customer_service_mobile||'--'}}
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				currmentIndex:0,
				currmentDate:"",
				currentHour:0,
				startTime:"",
				currmentTime:"",
				nextTime:"",
				totalHour:1,
				pastHour:0,
				dateIndex:0,
				nextIndex:0,
				dateList:[],
				status:1,
				equipment_id:"",
				tableInfo:{},
				mealList:[
					{
						p_name:"立即开台"
					},
					{
						p_name:"预约开台"
					}
				],
				hoursList:[],
				store_id:"",
				allHour:0,
				type:1,
				renew_order_id:"",
				couponShow:false,
				couponList:[],
				couponLenth:0,
				minReservationTime:0,//最低预定时长
				minRenewalTime:0,//最低续费时长
				days_in_advance:0,
				orderTime:"",
				numText:"",
				characters:"",
				hoursShow:false,
				hours:"",
				minutes:"",
				minutesPrice:""
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		computed:{
			totalPrice(){
				let totalPrice=0;
				totalPrice+=Number(this.totalHour*this.tableInfo.price)
				return totalPrice.toFixed(2);
			},
		},
		onLoad(ops) {
			this.equipment_id=ops.equipment_id
			this.renew_order_id=ops.renew_order_id||""
			this.store_id=ops.store_id||uni.getStorageSync('store_id')
			if(this.store_id){
				uni.setStorageSync('store_id',this.store_id)
			}
			uni.setStorageSync('equipment_id',this.equipment_id)
			this.tableDetails();
			this.getPaymentConfig();
		},
		onShow() {
			if(!uni.getStorageSync('token')){
				
			}else{
				this.getNewCoupon();
			}
		},
		onShareAppMessage() {
			return {
				path:'/pages/home/billiardsDetails?equipment_id='+this.equipment_id+'&store_id='+this.store_id
			};
		},
		methods: {
			//倒计时回调数据
			change(e) {
			    this.minutes = e.minutes
				this.hours=e.hours
			},
			yuyueTips(){
				this.$tools.showToast('当前店铺不允许预约，请到店后开台')
			},
			hoursToggele(){
				this.hoursShow=!this.hoursShow
			},
			goOrder(type){
				let order_type=""
				order_type=type==0?'immediately':'make_appointment'
				if(this.tableInfo.status==2&&type==0){
					this.$tools.showToast('对不起，请您选择其他桌，本桌正在使用中')
					return;
				}
				if(this.tableInfo.status==3||this.tableInfo.status==99){
					this.$tools.showToast('对不起，请您选择其他桌，本桌正在维护或者使用中')
					return;
				}
				uni.navigateTo({
					url:'/moduleA/beforConfirm?equipment_id='+this.equipment_id+'&order_type='+order_type
				})
			},
			goVerificationCoupon(){
				if(this.tableInfo.status==3||this.tableInfo.status==99){
					this.$tools.hideLoading()
					this.$tools.showToast('对不起，请您选择其他桌，本桌正在维护或者使用中')
					return;
				}
				uni.navigateTo({
					url:'/moduleA/verificationCoupon'
				})
			},
			// 配置
			getPaymentConfig(){
				this.$request.post(this.$api.paymentConfig, {
					store_id:uni.getStorageSync('store_id')
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						if(data){
							// this.paymentConfig=data
						}else{
							data={
								coupon: 0,
								order_cancellation: 0,
								recharge: 0,
								wechat_payment: 0
							}
						}
						uni.setStorageSync('paymentConfig',data)
					}
				})
			},
			showCoupon(){
				this.couponShow=true
			},
			closeCoupon(){
				this.couponShow=false
			},
			// 获取新用户优惠券
			getNewCoupon(){
				this.$request.post(this.$api.newCoupon, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					uni.hideToast();
					if (res.code==1) {
						for (let i in data) {
							data[i].num = data[i].sum
						}
						this.couponList=data
						this.couponLenth=this.couponList.length
						this.couponShow=true
					}else{
						this.couponShow=false
						uni.hideToast();
					}
				})
			},
			// 领取优惠券
			receiveCoupon(){
				this.$request.post(this.$api.receiveCoupon, {
					coupon:JSON.stringify(this.couponList),
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.closeCoupon();
						this.$tools.showToast('领取成功')
					}
				})
			},
			// 获取当前日期
			getDate(type,num){
				num=num||0
				var time = new Date();
				time.setDate(time.getDate() + num);
				let year=time.getFullYear()
				let month=time.getMonth()+1
				let day=time.getDate()
				let fullDate=""
				if(type==0){
					fullDate=year+'-'+month+'-'+day
				}else{
					fullDate=month+'月'+day+'日'
				}
				return fullDate;
			},
			// 获取当前时间
			getTimeString(currmentDate,num){
				num=num||0
				var time = new Date();
				var time1 =currmentDate?Date.parse(currmentDate.replace(/-/g, '/')):new Date().getTime();//如果传了日期就获取日期，否则获取当前时间
				time.setTime(time1 + 3600000*num);
				let hours=time.getHours()<=9?'0'+time.getHours():time.getHours()
				let minutes=time.getMinutes()<=9?'0'+time.getMinutes():time.getMinutes()
				return hours+":"+minutes
			},
			// 获取各个参数
			getHoursData(){
				var time = new Date();
				this.currentHour=time.getHours()//当前小时
				if((this.tableInfo.yuyue&&this.currmentIndex!=0)||this.renew_order_id){//如果有预约时间就从预约时间开始
					let addTime=this.addMinutes(this.getDate(0)+' '+this.tableInfo.yuyue,1)
					let currmentTime=this.getDate(0)+' '+addTime
					this.currmentTime=this.getTimeString(currmentTime)
					this.nextTime=this.getTimeString(currmentTime,this.totalHour)
					this.startTime=this.getTimeString(currmentTime)
					if(this.tableInfo.day_yuyue){//如果有预约
						this.currentHour=this.tableInfo.yuyue.split(':')[0]
						if(this.isToday(this.getDate(0,this.dateIndex),this.tableInfo.day_yuyue)){
							console.log('是同一天111111')
						}else{
							this.dateIndex+=1
							this.nextIndex=this.dateIndex+1
							let key=Object.keys(this.tableInfo.t_date)
							this.hoursList=this.tableInfo.t_date[key[this.dateIndex]]//获取当前天的格子
							console.log('不是同一天111111')
						}
					}
				}else{
					this.currmentTime=this.getTimeString()//获取当前时间
					this.nextTime=this.getTimeString('',this.totalHour)//下一个小时的时间
					this.startTime=this.getTimeString()
				}
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				this.pastHour=this.currentHour-1//过去了多少个小时
				if(this.currmentIndex==0){
					this.currmentDate=this.getDate(1,this.dateIndex);//获取当前日期
				}else{
					this.currmentDate=this.tableInfo.yuyue!='23:59'?this.getDate(1,this.dateIndex):this.getDate(1,1);//获取当前日期
				}
			},
			// 切换套餐
			changeMeal(index){
				this.currmentIndex=index
				this.totalHour=1//选择的小时数恢复默认
				this.dateIndex=0//天数恢复默认
				let key=Object.keys(this.tableInfo.t_date)
				if(this.days_in_advance==0||this.days_in_advance==1){
					this.hoursList=this.tableInfo.t_date[key[0]]
				}else{
					this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
				}
				if(this.currmentIndex>1){
					this.totalHour=this.mealList[this.currmentIndex].duration
				}
				this.getHoursData();
			},
			// 增加时间
			increase(){
				if(this.dateIndex!=0){//如果不是今天
					let key=Object.keys(this.tableInfo.t_date)
					if(this.days_in_advance==1){
						if (this.allHour>=23){
							this.$tools.showToast('最多可选当日时间')
							return
						}
					}else if(this.days_in_advance==2){
						if (this.dateIndex==1&&this.allHour>=23){
							this.$tools.showToast('最多可选当日时间')
							return
						}else{
							this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
						}
					}else if(this.days_in_advance==3){
						if(this.dateIndex==1){
							if (this.allHour>=47){
								return
							}else{
								this.hoursList=this.tableInfo.t_date[key[1]].concat(this.tableInfo.t_date[key[2]])
							}
						}else{
							if (this.allHour==23){
								this.$tools.showToast('最多可选当日时间')
								return
							}
						}
					}
				}else{
					if (this.allHour==47){
						this.$tools.showToast('最多可选次日时间')
						return
					}
				}
				this.totalHour++
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				console.log(this.allHour)
				if(this.currmentIndex==0){
					this.currmentTime=this.getTimeString()//获取当前时间
					this.nextTime=this.getTimeString('',this.totalHour)//下一个小时的时间
				}else{
					let currmentDate=this.getDate(0)+' '+this.currmentTime
					this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
				}
			},
			// 减少时间
			reduce(){
				if (this.totalHour==1) return//减少为一个小时时不可再减少
				this.totalHour--
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				if(this.currmentIndex==0){
					this.currmentTime=this.getTimeString()//获取当前时间
					this.nextTime=this.getTimeString('',this.totalHour)//下一个小时的时间
				}else{
					let currmentDate=this.getDate(0)+' '+this.currmentTime
					this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
				}
				console.log(this.currentHour)
			},
			// 选择日期
			changeDate(index){
				if(this.tableInfo.day_yuyue){//如果有预约
					if(this.isToday(this.getDate(0,index),this.tableInfo.day_yuyue)){
						console.log('是同一天111111')
					}else{
						if(this.greaterToday(this.getDate(0,index),this.tableInfo.day_yuyue)){
							console.log('预约时间大于今天')
							this.$tools.showToast('当前日期没有可预约的时段')
							return;
						}else{
							console.log('预约时间不大于今天')
						}
					}
				}
				if(this.dateIndex==index){
					return;
				}
				this.dateIndex=index
				if(this.currmentIndex>1){
					this.totalHour=this.mealList[this.currmentIndex].duration
				}else{
					this.totalHour=1//选择的小时数恢复默认
				}
				if(this.currmentIndex>=1){//如果是预约就选择当前日期下的格子
					let key=Object.keys(this.tableInfo.t_date)
					this.hoursList=this.tableInfo.t_date[key[this.dateIndex]]//获取当前天的格子
					this.currmentDate=this.getDate(1,this.dateIndex)
					if(this.dateIndex!=0){//不是今天
						this.startTime="00:00"
						this.currmentTime="00:00"
						this.pastHour=-1
						this.currentHour=0
						this.allHour=Number(this.totalHour)+Number(this.currentHour)
						let currmentDate=this.getDate(0)+' '+this.currmentTime
						this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
						// this.getHoursData();
					}else{
						this.getHoursData();
						if(this.days_in_advance==0||this.days_in_advance==1){
							this.hoursList=this.tableInfo.t_date[key[0]]
						}else{
							this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
						}
					}
				}
			},
			// 桌球详情
			tableDetails(){
				this.orderTime = Date.parse(new Date())/1000;
				this.$request.post(this.$api.tableDetails, {
					store_id:uni.getStorageSync('store_id'),
					equipment_id:this.equipment_id
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.tableInfo=data
						let nameList=this.tableInfo.equipment_name.split('')
						let isNaNEmpty = false //是否有数字
						isNaNEmpty =nameList.some(item =>!isNaN(item))
						if(!isNaNEmpty||isNaN(nameList[0])){	
							for(let i in nameList){
								if(i==0){
									this.numText+=nameList[i]
								}else{
									this.characters+=nameList[i]
								}
							}
						}else{
							for(let i in nameList){
								if(!isNaN(nameList[i])){
									this.numText+=nameList[i]
								}else{
									this.characters+=nameList[i]
								}
							}
						}
						this.days_in_advance=data.days_in_advance
						this.minutesPrice=data.minutes_price
						this.type=data.type
						uni.setStorageSync('type',this.type)
						this.getHoursData();
						this.mealList=[
							{
								p_name:"立即开台"
							},
							{
								p_name:"预约开台"
							}
						]
						this.mealList.push(...data.set_meal)
						let key=Object.keys(this.tableInfo.t_date)
						if(this.days_in_advance==0||this.days_in_advance==1){
							this.hoursList=this.tableInfo.t_date[key[0]]
						}else{
							this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
						}
						if(data.days_in_advance==1&&data.days_in_advance_type==1){
							this.dateList=[{riqis:'今天'}]
						}else if(data.days_in_advance==2){
							this.dateList=[{riqis:'今天'},{riqis:'明天'}]
						}else if(data.days_in_advance==3){
							this.dateList=[{riqis:'今天'},{riqis:'明天'},{riqis:'后天'}]
						}
						if(data.type==2){
							this.minReservationTime=data.minimum_reservation_time
						}
					}
				})
			},
			// 提交参数验证
			goConfirm(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				let timestamp = Date.parse(new Date())/1000;
				if(Math.abs(timestamp-this.orderTime)>300){
					this.$tools.hideLoading()
					uni.showModal({
						title: '提示',
						content: "当前页面停留过久，请新选择时间",
						success: (res) => {
							if(res.confirm){
								this.tableDetails();
							}
						}
					});
					return;
				}
				if(this.tableInfo.status==3||this.tableInfo.status==99){
					this.$tools.hideLoading()
					this.$tools.showToast('对不起，请您选择其他桌，本桌正在维护或者使用中')
					return;
				}else if(this.minReservationTime>this.totalHour){
					this.$tools.hideLoading()
					this.$tools.showToast('最低预定时长为'+this.minReservationTime+'小时')
					return;
				}
				let start_time=""
				let end_time=""
				let service_date=""
				if(this.currmentIndex!=0){
					start_time=this.currmentTime
				}
				if(this.currmentIndex==0){
					service_date=this.getDate(1,this.dateIndex);//获取当前日期
				}else{
					service_date=this.tableInfo.yuyue!='23:59'?this.getDate(1,this.dateIndex):this.getDate(1,1);//获取当前日期
				}
				this.$request.post(this.$api.confirmOrder, {
					store_id:uni.getStorageSync('store_id'),
					store_equipment_id:this.equipment_id,
					types:this.type,
					order_type:this.currmentIndex==0?'immediately':this.currmentIndex==1?'make_appointment':'other_packages',
					tr:this.currmentIndex>1?this.mealList[this.currmentIndex].tr:"",
					renew_order_id:this.renew_order_id,
					hour_start_time:start_time,
					hours:this.totalHour,
					day_type:this.dateIndex
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						let orderData={
							store_equipment_id:this.equipment_id,
							order_type:this.currmentIndex==0?'immediately':this.currmentIndex==1?'make_appointment':'other_packages',
							order_price:this.currmentIndex<=1?this.totalPrice:this.mealList[this.currmentIndex].p_price,
							yingfu_price:this.currmentIndex<=1?this.totalPrice:this.mealList[this.currmentIndex].p_price,
							type:1,
							coupon_id:0,
							store_name:this.tableInfo.shop_name,
							num_hour:this.totalHour,
							equipment_name:this.tableInfo.equipment_name,
							service_date:service_date,
							tr:this.currmentIndex>1?this.mealList[this.currmentIndex].tr:"",
							totalHour:this.totalHour,
							is_ci:this.allHour>23?1:0,
							types:this.type,
							renew_order_id:this.renew_order_id,
							hour_start_time:start_time,
							hours:this.totalHour,
							day_type:this.dateIndex
						}
						this.submitOrder(orderData)
					}else{
						uni.hideToast()
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function(res) {
								
							}
						});
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			submitOrder(orderData){
				orderData.tr?orderData.num_hour=orderData.tr:orderData.num_hour=""
				orderData.store_id=uni.getStorageSync('store_id')
				this.$request.post(this.$api.submitOrder,orderData, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						orderData.startTime=data.start_time
						orderData.endTime=data.end_time
						uni.navigateTo({
							url:'/pages/home/confirmOrder?orderData='+JSON.stringify(orderData)
						})
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 28upx;
	}
	.billiards-box{
		padding: 40upx 32upx;
		min-height: 232rpx;
		background: linear-gradient( 180deg, #3D46C7 0%, #7781FD 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		.table-info{
			.big{
				font-family: Arial, Arial;
				font-weight: bold;
				font-size: 136rpx;
				color: #F9FAFE;
			}
			.info{
				margin-left: 20upx;
				.table-name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 34rpx;
					color: #F9FAFE;
					.status{
						display: inline-block;
						width: 118rpx;
						line-height:48upx;
						height: 48rpx;
						background: linear-gradient( 180deg, #4AA22A 0%, #69D037 100%);
						border-radius: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						text-align: center;
						margin-left: 18upx;
					}
					.busy{
						background: #FF8A57;
					}
					.repair{
						background: #848C95;
					}
				}
				.store-name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-top: 20upx;
					opacity: .5;
					.navigation-icon{
						width: 26upx;
						height: 34upx;
						margin-right: 10upx;
					}
				}
			}
		}
		.center-box{
			.appointment-tips{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}
			.down-icon{
				width: 30upx;
				height: 18upx;
				margin-top: 12upx;
			}
			.up{
				transform: rotate(180deg);
			}
		}
		.time-box{
			.time-tips{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}
			.time{
				ont-family: Arial, Arial;
				font-weight: bold;
				font-size: 148rpx;
				color: #F9FAFE;
			}
		}
		.lattice-box{
			margin-top: 34upx;
			flex-wrap: wrap;
			.lattice-item{
				margin-right: 6upx;
				.lattice{
					width: 46upx;
					height: 48upx;
					background:rgba(0, 0, 0, .3);
					border-radius: 50%;
					text-align: center;
					margin-bottom: 10upx;
				}
				.blue{
					background: #26BCFD !important;
				}
				.white{
					background: linear-gradient( 180deg, #4AA22A 0%, #69D037 100%);
				}
				.red{
					background:#FF8A57!important;
				}
				.lattice-text{
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 28upx;
					color: #FFFFFF;
				}
			}
		}
	}
	.repair-box{
		background: #464F58;
	}
	.mode-box{
		flex-wrap: wrap;
		.mode-item{
			background: #232428;
			border-radius: 20rpx;
			padding: 50upx 32upx 32upx 32upx;
			width: 276upx;
			margin-top: 14upx;
			margin-right: 14upx;
			&:nth-of-type(2n){
				margin-right:0;
			}
			.mode-img{
				width: 128upx;
				height: 128upx;
				margin-bottom: 58upx;
			}
			.mode-cont{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(255, 255, 255, .5);
				.mode-title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 48rpx;
					color: #FFFFFF;
					margin-bottom: 12upx;
				}
			}
		}
		.disabled{
			opacity: .3;
		}
	}
	.service-box{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #FFFFFF;
		width: 414rpx;
		height: 96rpx;
		background: #232428;
		border-radius: 72rpx;
		margin:30upx auto;
		.service-icon{
			width: 96upx;
			height: 96upx;
			margin-right: 20upx;
		}
	}
</style>
